<template>
  <div class="mod-config">
    <div v-if="activityVisible">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="activityModify()">新增</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </div>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column label="活动序号" prop="id"></el-table-column>
        <el-table-column label="兑换形式">
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? '资源兑换' : '' }}
            {{ scope.row.type === 2 ? '资源竞拍' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="资源等级">
          <template slot-scope="scope">
            {{ scope.row.resourceGrade === 1 ? '白银' : '' }}
            {{ scope.row.resourceGrade === 2 ? '黄金' : '' }}
            {{ scope.row.resourceGrade === 3 ? '钻石' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="所属项目">
          <template slot-scope="scope">
            {{ getProject(scope.row.appLabel) }}
          </template>
        </el-table-column>
        <el-table-column label="兑换所需积分" prop="basePoint"></el-table-column>
        <el-table-column label="点击量" prop="clickNum"></el-table-column>
        <el-table-column label="加价幅度" prop="increasePoint"></el-table-column>
        <el-table-column label="所需人数" prop="memberNum"></el-table-column>
        <el-table-column label="已兑换人数" prop="successMemberNum"></el-table-column>
        <el-table-column label="群库内资源类型">
          <template slot-scope="scope">
            {{ scope.row.resourceType === 1 ? '群二维码' : '' }}
            {{ scope.row.resourceType === 2 ? '个人二维码 ' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="开始时间" prop="startTime"></el-table-column>
        <el-table-column label="结束时间" prop="endTime"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <!--判断结束时间大于当前时间显示修改-->
            <el-button v-if="scope.row.endTime?new Date(scope.row.endTime).getTime()>new Date().getTime():'true'" type="text" size="small" @click="activityModify(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="lookOrCheck(scope.row.id,scope.row.memberNum,scope.row.type)">{{ scope.row.type === 1?'兑换列表':'竞拍列表' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <!--新增活动-->
      <activity-add ref="activityAdd" @refreshDataList="getDataList" ></activity-add>
    </div>

    <change-list v-else ref="changeList" @goBack="goChangeListBack"></change-list>
  </div>

</template>

<script>
  import ActivityAdd from './activityAdd'
  import ChangeList from './changeList'
  export default {
    data() {
      return {
        isModify: true,
        useroption: [
          {
            value: null,
            label: '全部'
          },
          {
            value: '1',
            label: '生效'
          },
          {
            value: '2',
            label: '失效'
          }
        ],
        dataForm: {},
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        totalStatistic: {},
        id: '',
        appLabel: [],
        activityVisible: true
      }
    },
    components: {
      ActivityAdd,
      ChangeList
    },
    mounted() {
      this.getAppLabel()
    },
    methods: {
      // 获取数据列表
      init(id) {
        this.id = id
        this.getDataList()
      },
      getDataList() {
        this.dataListLoading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl(`/point/groupcollectionactivity/list/${this.id}`),
          method: 'get',
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      getAppLabel() {
        this.$http({
          url: this.$http.adornUrl('/point/applabel/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.appLabel = data.appLabelList
          }
        })
      },
      lookOrCheck(id, num, type) {
        this.activityVisible = false
        this.$nextTick(() => {
          this.$refs.changeList.init(id, num, type)
        })
      },
      getProject(id) {
        let labelName = ''
        this.appLabel.map((item) => {
          if(item.id == id) {
            labelName = item.labelName
          }
        })
        return labelName
      },
      activityModify(id) {
        this.$nextTick(() => {
          this.$refs.activityAdd.init(this.id, id)
        })
      },
      goChangeListBack() {
        this.activityVisible = true
      },
      goBack() {
        this.$emit('goBack')
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      }
    }
  }
</script>
<style scoped>
  .integral{
    display: flex;
  }
  .integral>div{
    margin: 15px;
  }
</style>
